import React from 'react';
import { CaretUpOutlined, CaretDownOutlined } from '#/utils/antdIcons';
import PropTypes from 'prop-types';
import styles from './index.less';

// #1E7CE8

const TableTag = ({ isUp, value, percentage = true, backgroundToColor }) => {
  let background = Number(value) === 0 ? 'rgb(243, 244, 244)' : isUp ? '#FEECE9' : '#E9F7F3';
  let color = Number(value) === 0 ? 'rgb(136, 142, 149)' : isUp ? '#ED5945' : '#28B28B';
  const style = { background, color };

  if (backgroundToColor) {
    style.color = Number(value) === 0 ? '#646769' : style.color;
    style.background =
      Number(value) === 0
        ? 'rgba(100, 103, 105, 0.2)'
        : isUp
        ? 'rgba(237, 89, 69, 0.2)'
        : 'rgba(48, 212, 133, 0.2)';
  }
  let icon =
    Number(value) !== 0 ? (
      isUp ? (
        <CaretUpOutlined style={{ color, marginRight: 3 }} />
      ) : (
        <CaretDownOutlined style={{ color, marginRight: 3 }} />
      )
    ) : (
      ''
    );
  return (
    <span className={styles.tableTagStyle} style={style}>
      {icon}
      {Math.abs(value)}
      {percentage ? '%' : ''}
    </span>
  );
};

TableTag.propTypes = {
  isUp: PropTypes.bool,
  value: PropTypes.number,
  percentage: PropTypes.bool,
};

export default TableTag;
